<template>
	<view class="groupinfo">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">群详情</view>
			</template>
			<template #right>
				<view class="info" @tap="goGroupChat"><image src="../../static/images/group/groupchat.png" mode="widthFix"></image></view>
			</template>
		</comtarbar>
		<view class="groupmain">
			<scroll-view scroll-y="true">
				<view class="g_avatar">
					<view class="g_imgbox">
						<view class="g_box">
							<view class="g_img" @tap="selectImg"><image :src="getGroupInfo.imgUrl" mode="aspectFill"></image></view>
						</view>
						<view class="g_info">{{ getGroupInfo.name }}</view>
					</view>
					<view class="bg-img"><image :src="getGroupInfo.imgUrl" mode="widthFix"></image></view>
					<view class="mask"></view>
				</view>
				<view class="memberbox">
					<view class="member-item" v-for="item in getGroupInfo.user_list" :key="item.user._id" @tap="goInfo(item.user._id)">
						<image :src="item.user.avatars" mode="aspectFill"></image>
						<view class="manager" v-if="item.user._id == getGroupInfo.manager"><image src="../../static/images/group/manager.png" mode="widthFix"></image></view>
						<view class="m_name">{{ item.nickName }}</view>
					</view>
					<view class="member-item">
						<view class="m_imgbox" @tap="goAdd"><image src="../../static/images/group/Group.png" mode="widthFix"></image></view>
					</view>
					<view class="more" @tap="more">查看全部群成员</view>
				</view>
				<view class="info">
					<view class="info_item" @tap="modify('群名')">
						<view class="info_title">群名称</view>
						<view class="info_content">{{ getGroupInfo.name }}</view>
						<view class="info_oprea"><view v-show="isManager">></view></view>
					</view>
					<view class="info_item">
						<view class="info_title">群号码</view>
						<view class="info_content">{{ getGroupInfo.number }}</view>
						<view class="info_oprea"><view v-show="false">></view></view>
					</view>
					<view class="info_item" @tap="modify('公告')">
						<view class="info_title">群公告</view>
						<view class="info_content">{{ getGroupInfo.notice }}</view>
						<view class="info_oprea">></view>
					</view>
					<view class="info_item" @tap="modify('昵称')">
						<view class="info_title">群内昵称</view>
						<view class="info_content">{{ getG_nickName }}</view>
						<view class="info_oprea">></view>
					</view>
				</view>
				<view class="operation">
					<view class="op_item">
						<view class="op_type">消息免打扰</view>
						<view class="op_opera"><switch class="switch" color="#FFE431" checked="true" @change="switch1" /></view>
					</view>
				</view>
				<view class="dissolve" v-if="isManager" @tap="dissolve">解散该群</view>
				<view class="dissolve" v-if="isManager" @tap="management">移除群成员</view>
				<view class="btn" @tap="exitGroup">退出群聊</view>
			</scroll-view>
		</view>
		<modify ref="modify" :isManager="isManager" :type="type" :groupInfo="getGroupInfo" :n_Name="nickName" catchtouchmove="false" @modify="modifyInfo" v-if="true"></modify>
	</view>
</template>

<script>
import request from '../../api/request.js';
import { mapGetters } from 'vuex';
import modify from './modify/modify.vue';
export default {
	data() {
		return {
			id: null,
			nickName: null,
			isScroll: false,
			isManager: false,
			type: '',
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.$store.dispatch('getInfo', this.id);
		setTimeout(() => {
			this.isManager = this.getUser._id == this.getGroupInfo.manager;
		}, 100);
	},
	components: {
		modify
	},
	computed: {
		...mapGetters(['getUser', 'getGroupInfo', 'getG_nickName'])
	},
	methods: {
		// 消息免打扰按钮
		switch1(e) {
			console.log('switch1 发生 change 事件，携带值为', e.target.value);
		},
		// 修改群头像
		selectImg() {
			if (this.getUser._id == this.getGroupInfo.manager) {
				// console.log("你是群主")
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'http://localhost:3000/upload/group/modify', //仅为示例，非真实的接口地址
							// url: 'http://www.yemengs.cn/upload/group/modify', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token:uni.getStorageSync("token"),
								id: this.id,
								savePath: 'groupAvatars'
							},
							success: uploadFileRes => {
								let data = JSON.parse(uploadFileRes.data);
								if (data.status) {
									uni.showToast({
										title: data.msg,
										duration: 3000
									});
									this.$store.dispatch("getInfo",this.id)
								}
							}
						});
						uploadTask.onProgressUpdate(res => {
							// console.log('上传进度' + res.progress);
							// console.log('已经上传的数据长度' + res.totalBytesSent);
							// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
						});
					}
				});
			}
		},
		// 查看群成员信息
		goInfo(id) {
			uni.navigateTo({
				url: '../information/information?id=' + id
			});
		},
		// 调用子组件modify
		modify(type) {
			this.type = type;
			if (this.type == 'name' && !this.isManager) {
				return;
			}
			this.$refs.modify.show();
		},
		// 修改群信息
		async modifyInfo(obj) {
			let data = { id: this.id, token: uni.getStorageSync('token') };
			Object.assign(data, obj);

			let res = await request({
				url: '/group/name',
				data,
				method: 'POST'
			});
			if (res[1].data.nModified) {
				uni.showToast({
					title: '信息修改成功',
					duration: 1000
				});
				this.$store.dispatch('getInfo', this.id);
			} else {
				uni.showToast({
					title: '信息修改失败',
					icon: 'none',
					duration: 1000
				});
			}
		},
		// 跳转到添加群成员界面
		goAdd() {
			uni.navigateTo({
				url: 'add/add?id=' + this.id
			});
		},
		//查看所有群成员
		more(){
			uni.navigateTo({
				url: 'members/members'
			});
		},
		// 移除群成员
		management(){
			uni.navigateTo({
				url: 'members/members?id=' + this.id +"&&type=management"
			});
		},
		// 退出群聊
		exitGroup() {
			// 如果是群主则需要先转让群（选择其他人当群主）
			if (this.isManager) {
				uni.showModal({
					title: '退群提醒',
					content: '由于您是该群的群主，在退群之前需要选择一位群成员担任群主，即将跳转到转让页面，是否继续？',
					success: async res => {
						if (res.confirm) {
							uni.navigateTo({
								url: 'members/members?id=' + this.id +"&&type=transfer"
							});
						} else if (res.cancel) {
						}
					}
				});
			} else {
				//如果不是，就直接退群
				uni.showModal({
					title: '退群提醒',
					content: '确定退出该群？',
					success: async res => {
						if (res.confirm) {
							let result = await request({
								url: '/group/member/exit',
								data: {
									id: this.id,
									token: uni.getStorageSync('token')
								},
								method: 'POST'
							});
							if (result[1].data.nModified) {
								uni.showToast({
									title: '已经成功退出群聊',
									duration: 1000
								});
								this.$store.dispatch('getGroupList');
								setTimeout(() => {
									uni.navigateTo({
										url: '../group/group'
									});
								}, 1200);
							}
						} else if (res.cancel) {
						}
					}
				});
			}
		},
		// 解散群聊
		async dissolve(){
			console.log("解散群聊")
			let result = await request({
				url: '/group/dissolve',
				data: {
					token:uni.getStorageSync("token"),
					id: this.id,
				},
				method: 'POST'
			});
			console.log(result)
			if(result[1].data.deletedCount){
				uni.showToast({
					title: '成功解散群聊',
					duration: 1000
				});
				this.$store.dispatch('getGroupList');
				setTimeout(() => {
					uni.navigateTo({
						url: '../group/group'
					});
				}, 1200);
			}
		},
		// 群聊天页面
		goGroupChat(){
			uni.navigateTo({
				url:"../chat/chat?id="+this.id+"&&type=group"
			})
		},
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.groupinfo {
	padding-top: var(--status-bar-height);
}
.comtarbar {
	background: white;
	.info{
		margin-left: 30rpx;
	}
}
.groupmain {
	padding-top: 88rpx;
	padding-bottom: 0rpx;
	height: calc(100vh - 88rpx);
	scroll-view {
		height: 100%;
	}
	.g_avatar {
		background: white;
		height: 35vh;
		position: relative;
		overflow: hidden;
		.g_imgbox {
			position: absolute;
			z-index: 3;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			.g_box {
				display: flex;
				justify-content: center;
				.g_img {
					border-radius: 50%;
					width: 200rpx;
					height: 200rpx;
					overflow: hidden;
					margin: 10rpx;
					border: 4rpx solid white;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
				}
			}

			.g_info {
				color: white;
				text-align: center;
				margin-top: 20rpx;
			}
		}

		.bg-img {
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			image {
				width: 100%;
				height: auto;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
		}
		.mask {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.3);
		}
	}

	.memberbox {
		padding-top: 20rpx;
		margin: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.member-item {
			width: 20%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			position: relative;
			.manager {
				position: absolute;
				top: -20rpx;
				right: 4rpx;
				image {
					width: 40rpx;
					height: auto;
				}
			}
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
			.m_name {
				margin-top: 10rpx;
				width: 100rpx;
				text-align: center;
				font-size: 26rpx;
				color: rgba(25, 29, 35, 0.5);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.m_imgbox {
				width: 100rpx;
				height: 100rpx;
				background: #ffe431;
				border-radius: 10%;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					height: 60rpx;
					width: 60rpx;
				}
			}
		}
		.more {
			margin: 30rpx 0rpx;
			width: 100%;
			font-size: 30rpx;
			color: #ccc;
			text-align: center;
		}
	}
	.info {
		border-top: 10rpx solid #dfdfdf;
		border-bottom: 10rpx solid #dfdfdf;
		.info_item {
			margin: 0rpx 20rpx;
			display: flex;
			height: 100rpx;
			view {
				height: 100rpx;
				line-height: 100rpx;
			}
			.info_title {
				color: rgba(39, 40, 50, 1);
				font-size: 32rpx;
				flex: 3;
			}
			.info_content {
				color: rgba(39, 40, 50, 0.6);
				font-size: 32rpx;
				flex: 6;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.info_oprea {
				text-align: right;
				color: rgba(39, 40, 50, 0.6);
				font-size: 38rpx;
				flex: 1;
			}
		}
	}
	.info .info_item:not(:last-child) {
		border-bottom: 2rpx solid #e2e2e2;
	}
	.operation {
		border-bottom: 10rpx solid #dfdfdf;
		.op_item {
			margin: 0rpx 20rpx;
			display: flex;
			height: 100rpx;
			.op_type {
				flex: 4;
				color: rgba(39, 40, 50, 1);
				font-size: 32rpx;
				height: 100rpx;
				line-height: 100rpx;
			}
			.op_opera {
				flex: 1;
				text-align: right;
				.switch {
					margin-top: 16rpx;
					transform: scale(0.8);
				}
			}
		}
	}
	.dissolve {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: red;
		border-bottom: 10rpx solid #dfdfdf;
	}
	.btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: red;
	}
}
</style>
